<template>
  <ConTent>
    <div class="row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="register">
          <div class="mb-3">
            <label for="exampleFormControlInput4" class="form-label">用户名</label>
            <input v-model="username" type="text" class="form-control" id="exampleFormControlInput4" placeholder="用户名">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput5" class="form-label">密码</label>
            <input v-model="password" type="password" class="form-control" id="exampleFormControlInput5" placeholder="密码">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput6" class="form-label">邮箱</label>
            <input v-model="email" type="email" class="form-control" id="exampleFormControlInput6" placeholder="邮箱">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput7" class="form-label">手机号</label>
            <input v-model="phone" type="text" class="form-control" id="exampleFormControlInput7" placeholder="手机号">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput8" class="form-label">地址</label>
            <input v-model="address" type="text" class="form-control" id="exampleFormControlInput8" placeholder="地址">
          </div>
          <div style="color:red;">{{ error_message }}</div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
      </div>
    </div>
  </ConTent>
</template>

<script>
import ConTent from '@/components/ConTent.vue';
import { ref } from 'vue';
// import {useStore} from 'vuex';
import router from '@/router/index';
import $ from 'jquery';
export default {
  components: {
    ConTent,
  },
  setup() {
    let username = ref("");
    let password = ref("");
    let email = ref("");
    let phone = ref("");
    let address = ref("");
    // let store=useStore();
    let error_message = ref("");
    const register = () => {
      $.ajax({
        url: "http://8.134.248.229:10085/user/account/register/",
        type: "post",
        data: {
          username: username.value,
          password: password.value,
          email: email.value,
          phone: phone.value,
          address: address.value,
        },
        success(resp) {
          if (resp.error_message === "success") {
            router.push({ name: "login" });
          }
          else {
            error_message.value = resp.error_message;
          }
        },
        error() {
          console.log("失败");
        }
      })
    }
    return { username, password, email, phone, address, register, error_message };
  }
}
</script>

<style scoped>
button {
  width: 100%;
}
</style>